<!-- 字符云配置 -->
<template>
  <div>
    <el-form-item label="最小字体">
      <avue-input-number v-model="main.activeOption.minFontSize"></avue-input-number>
    </el-form-item>
    <el-form-item label="最大字体">
      <avue-input-number v-model="main.activeOption.maxFontSize"></avue-input-number>
    </el-form-item>
    <el-form-item label="间距">
      <avue-input-number v-model="main.activeOption.split"></avue-input-number>
    </el-form-item>
    <el-form-item label="旋转">
      <avue-switch v-model="main.activeOption.rotate"></avue-switch>
    </el-form-item>
    <el-collapse accordion>
    <el-collapse-item title="颜色组">
      <avue-crud :option="colorOption"
                 :data="main.activeOption.colorList"
                 @row-save="rowSave"
                 @row-del="rowDel"
                 @row-update="rowUpdate"></avue-crud>
    </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
export default {
  inject: ["main"],
  data () {
    return {
      colorOption: {
        menuWidth: 150,
        refreshBtn: false,
        columnBtn: false,
        labelWidth: 100,
        column: [{
          label: '颜色',
          prop: 'color1',
          type: 'color',
        }]}
    }
  },
  methods: {
    rowSave (row, done) {
      this.main.activeOption.colorList.push(row);
      done()
    },
    rowDel (row, index) {
      this.main.activeOption.colorList.splice(index, 1);
    },
    rowUpdate (row, index, done) {
      this.main.activeOption.colorList.splice(index, 1, row);
      done()
    },
  }
}
</script>